<template>
    <div class="container">
        <header>
            <h1><a href="login.html">我的</a></h1>
            <a href="#"><img src="images/icon3.png"></a>
        </header>
        <section>
            <ul>
                <li class="title">房源管理</li>
                <li class="content">
                    <a class="xz" href="#">预约中心<span class="active">已预约2家</span></a>
                </li>
                <li class="content">
                    <a class="xz" href="#">房源收藏<span>已收藏4套</span></a>
                </li>
                <li class="content">
                    <a class="xz" href="#">资讯收藏</a>
                </li>
                <li class="title">通知管理</li>
                <li class="content">
                    <a id="k" href="#">消息中心
                        <div class="keys">
                            <div class="yuan" style="left: 0rem;"></div>
                        </div>
                    </a>
                </li>
                <li class="title">其他</li>
                <li class="content">
                    <a id="dark" href="#">夜间模式
                        <div class="keys">
                            <div class="yuan" style="left: 0rem;"></div>
                        </div>
                    </a>
                </li>
                <li class="content">
                    <a class="xz" href="#">意见反馈</a>
                </li>
                <li class="content">
                    <a class="xz" href="#">关于包图租房</a>
                </li>
                <li class="content">
                    <a class="xz" href="bankcard.html">设置</a>
                </li>
            </ul>
        </section>

    </div>
</template>
<script type="text/ecmascript-6">
    import $ from 'jquery'

    export default {
        // 组件名称
        name: 'my',
        // 加载页面的子组件（也没面分离的内容）
        components: {},
        data() {
            return {


            }

        },
        // 生命周期
        mounted() {
            $("#k").on("click", (e) => {
                e.preventDefault();
                this.keysClick($("#k"));
            });
            $("#dark").on("click", (e) => {
                e.preventDefault();
                this.keysClick($('#dark'), () => { //回调函数
                    var isDark = localStorage.getItem("isDark");
                    if (isDark == "true") {
                        localStorage.setItem("isDark", "false");
                    } else {
                        localStorage.setItem("isDark", "true");
                    }
                    this.isDarkfun();
                });
            });
            this.isDarkfun();




        },
        created() {},
        updated() {},
        destroyed() {},
        methods: {
            //按钮开关
            keysClick(obj, callback) {
                let keys = obj.children();
                let yuan = keys.children();
                // console.log();
                if (yuan.css("left") == 0 + "px") {
                    yuan.css("left", 0.52 + "rem");
                    keys.css("backgroundColor", "#22fb35");
                    // left = 1;
                } else {
                    yuan.css("left", "0rem");
                    keys.css("backgroundColor", "#f2f2f8");
                    // left = 0;
                }
                // if (callback) {
                // callback();
                // }
                callback && callback();
            },
            // 深色模式
            isDarkfun() {
                let isDark = localStorage.getItem("isDark");
                if (isDark == "true") {
                    $("#dark").attr("isDark", "true");
                    this.setTheme();
                } else {
                    localStorage.setItem("isDark", "false");
                    $("#dark").attr("isDark", "false");
                    this.setTheme2();
                }
            },
            // 设置夜间样式
            setTheme() {
                // 把背景色设置黑色、把文字设置为白色
                $('*').css("color", "#fff");
                $('body,nav ul,header,select,.addbank,.addbank .info input[type="text"],.telinput[type = "text"], footer, .form - control ')
                    .css({
                        "background-color": "#000",
                    });
                $("ul.c li,.search,.text ul li,.search input[type='text'],.username,footer .left,.weather").css({
                    "background-color": "#333"
                });
                $('body').css("opacity", "0.8");
            },

            // 取消夜间样式
            setTheme2() {
                $('*').css("color", "");
                $("body,nav ul,header,select,ul.c li,.search,.text ul li,.search,.searchinput[type = 'text'], footer, .addbank, .addbank.info input[type = 'text'], .tel input[type ='text'], .username, footer.left, .weather, .form - control ")
                    .css({
                        "background-color": "",
                    });
                $('body').css("opacity", "");
            }
        },
        computed: {},
        watch: {}
    }
</script>

<style scoped lang="less" rel="stylesheet/less">
    header {
        background: url(/images/mybg.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-color: #fff;
        width: 100%;
        height: 2.43rem;
        /*height: auto;*/
        position: relative;
    }

    header h1 {
        font-size: .6rem;
        padding-left: .35rem;
        padding-top: 1.22rem;
    }

    header img {
        position: absolute;
        right: .42rem;
        top: 1.28rem;
        width: .41rem;
        height: .46rem;
        /*font-size: .46rem;*/
    }

    section {
        margin: 0 .35rem;
        margin-bottom: 1.3rem;
    }

    section a {
        display: block;
        width: 100%;
        height: 100%;
    }

    section .title {
        height: .6rem;
        color: #b7b7b4;
        font-size: .28rem;
        line-height: .6rem;
    }

    section .content {
        height: 1.22rem;
        width: 100%;
        border-bottom: .01rem #f6f6f6 solid;
        font-size: .36rem;
        line-height: 1.4rem;
    }

    section .content:last-child {
        border: none;
    }

    section .content span {
        font-size: .32rem;
        color: #b0b0ae;
        float: right;
        margin-right: .38rem;
        line-height: 1.2rem;
        position: relative;
        top: .1rem;
    }

    section .content span.active {
        color: #fb6c62 !important;
        ;
    }

    section li {
        position: relative;
    }

    section li.content a.xz::after {
        font-family: "iconfont";
        position: absolute;
        top: .05rem;
        content: "\e7a7";
        right: -0.2rem;
        width: .5rem;
        height: 1.22rem;
        line-height: 1.22rem;
        font-size: .32rem;
        color: #b7b7b4;
    }

    section li.content .keys {
        width: 1.1rem;
        height: .6rem;
        border-radius: .3rem;
        background-color: #f2f2f8;
        border: 1px #eaeaec solid;
        position: absolute;
        top: .3rem;
        right: 0;
        transition: all .2s;
    }

    section li.content .keys .yuan {
        width: .6rem;
        height: .6rem;
        border-radius: 50%;
        background-color: #fff;
        position: relative;
        left: 0;
        box-shadow: 0.05rem 0 0.1rem #ccc;
        transition: all .2s;
    }
</style>